import React, { useState } from 'react'
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    ActivityIndicator,
    Button,
    FlatList,
    Image,
    ImageBackground,
    Modal,
    Picker,
    TouchableOpacity
  } from 'react-native';

let Styles = StyleSheet.create({
    boxView : {
        borderColor: 'rgba(0,0,0,0.3)', 
        borderBottomWidth: 1,
        flexDirection : "row",
        height : 190,
        justifyContent : "space-around",
        alignContent : "center",
        paddingTop : 10
    },
    imageBox : {
        width : 130,
        height: 166,
        borderColor: 'rgba(0,0,0,0.3)',
        borderRadius : 1,
        borderWidth: 1,
        alignItems : "center",
        
    },
    image : {
        width : 120,
        height : 156,
        marginTop : 4,
    },
    intro1 : {
        width : 200,
        height : 166
    },
    title : {
        fontSize : 22,
        fontWeight : "bold",
    },
    author : {
        fontSize: 17,
        color : "#7a7374",
        marginTop : 15
    },
    totalNum : {
        fontSize : 16,
        color : "#7a7374",
        marginTop : 6
    },
    kind : {
        fontSize : 16,
        color : "#7a7374",
        marginTop : 6
    },
    upTime : {
        fontSize: 13,
        color : "#7a7374",
        marginTop : 6
    },
    intro2 : {
        padding : 15,
        borderColor: 'rgba(0,0,0,0.3)',
        borderBottomWidth: 1,
    },
    simIntroTit : {
        fontSize : 20,
        color : "rgba(0,0,0,0.6)",
        marginBottom : 7
    },
    simIntro : {
        fontSize : 16,
        color : "rgb(75,78,42)"
    },
    chapter : {
        padding : 15
    },
    listItem : {
        height : 50,
        borderColor: 'rgba(0,0,0,0.3)',
        borderBottomWidth: 1,
        width : 340,
        marginLeft : 10
    },
    chapt : {
        lineHeight : 50,
        marginLeft : 20,
        color : "rgba(0,0,0,0.6)",
        fontSize : 16
    },
    btnBox : {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding : 15
    },
    page : {
        lineHeight: 35,
        color : "rgba(0,0,0,0.6)",
        fontSize : 20
    }
});

function DetailsScreen({ route, navigation }) {
    const { data, host } = route.params;
    const [nowPage, setNowPage] = useState(1);
    //const [isHungry, setIsHungry] = useState(true);
    const [chapterData, setChapter] = useState([
        // {
        //     chapterName : "第一章",
        //     chapterPath : "/fad1",
        //     bookID : 1,
        //     id : 1
        // },
    ]);

    function getChapter(){
        fetch( host +  "/getbookDetails?id=1&start=" + ((nowPage - 1) * 10)).then(res => {
            return res.json();
        }).then(res => {
            setChapter(res);
        });
        

    }
    getChapter();

    function _chapterPress(path, chapterName){
        navigation.navigate('Book',{
            path,
            host,
            chapterName
        });
    }

    function _renderItem(cData){
        return (
            
            <View style={Styles.listItem}>
                <TouchableOpacity onPress={()=>{_chapterPress(cData.item.chapterPath, cData.item.chapterName)}}>
                    <Text style={Styles.chapt}>{cData.item.chapterName}</Text>
                </TouchableOpacity>
            </View>
        )
    }

    function _setPage(num){
        if( nowPage >= 1 && nowPage <= data.totalPages){
            var page = nowPage + num;
            if(page == 0){
                page = 1
                return;
            }
            if(page == 11){
                page = 10
                return;
            }
            setNowPage(page);
        }
        
        
    }

    return (
        <FlatList
            ListHeaderComponent={
                <View>
                    <View style={Styles.boxView}>
                        <View style={Styles.imageBox}>
                            <Image source={require('../asserts/tang1.jpg')} style={Styles.image}></Image>
                        </View>
                        <View style={Styles.intro1}>
                            <Text style={Styles.title}>{data.novalName}</Text>
                            <Text style={Styles.author}>作者：{data.author}</Text>
                            <Text style={Styles.totalNum}>总字数：1000万字</Text>
                            <Text style={Styles.kind}>类别：玄幻</Text>
                            <Text style={Styles.upTime}>最后更新：2015-03-26 10:43:18</Text>
                        </View>
                    </View>
                    <View style={Styles.intro2}>
                        <Text style={Styles.simIntroTit}>简介：</Text>
                        <Text style={Styles.simIntro}>        {data.introduce}</Text>
                    </View>
                    <View style={Styles.chapter}>
                        <Text style={Styles.simIntroTit}>
                            章节：
                        </Text>
                    </View>
                </View>
            }
            data={chapterData}
            renderItem={_renderItem}
            keyExtractor={(item,index)=> index + ""}
            ListFooterComponent={
                <View style={Styles.btnBox}>
                    <Button title="上一页" onPress={()=>{_setPage(-1)}}></Button>
                    <Text style={Styles.page}>{nowPage}/{data.totalPages}</Text>
                    <Button title="下一页" onPress={()=>{_setPage(1)}}></Button>
                </View>
            }
        />
    );
}


export default DetailsScreen;